<template>
	<view>
		<u-popup v-model="calendarShow" mode="bottom" border-radius="20" :mask-close-able="false">
			<view class="calendar-wrapper">
				<view class="title">
					<text @click="close">关闭</text>
					<text>{{ rangeTitle }}</text>
					<text @click="ok">确定</text>
				</view>
				<picker-view indicator-style="height: 50px;" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="md-item" v-for="(item, index) of ranges" :key="index">
							<text>{{ item.dateMD }}</text>
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="md-item" v-for="(item, index) of rangesTime" :key="index">
							<text>{{ item.time }}</text>
						</view>
					</picker-view-column>
					<!-- <picker-view-column>
						<view class="md-item" v-for="(item, index) of rangesTime" :key="index">
							<text>{{ item.time }}</text>
						</view>
					</picker-view-column> -->
				</picker-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {
		name: 'mrdotyan-range-calendar',
		props: {
			rangeLength: {
				type: Number,
				default: 14
			},
			calendarShow: {
				type: Boolean,
				default: false
			},
			rangeTitle: {
				type: String,
				default: '请选择时间'
			}
		},
		emits: ['update:modelValue', 'change'],
		data() {
			/* 生成数组，循环遍历出时间段 */
			const times = new Array(48)
				.fill(0)
				.map((ele, index) =>
					Object.assign({
						time: ` ${index % 2 == 0 ? (((ele + index / 2) < 10 ? '0' + (ele + index / 2) : (ele + index / 2))) : (((ele + Math.floor(index / 2)) < 10 ? '0' + (ele + Math.floor(index / 2)) : ele + Math.floor(index / 2)))}:${index % 2 == 0 ? '00' : '30'}`,
						index: index
					})
				);
			const date = new Array(36).fill(1).map((_, index) => {
				return {
					dayjsObject: dayjs().add(index, 'day'),
					dateMD: dayjs()
						.add(index, 'day')
						.format('MM月DD日'),
					index
				};
			});
			const [currentDate] = date;
			const [currentTime] = times;
			return {
				value: [currentDate.index, currentTime.index, currentTime.index],
				ranges: date,
				rangesTime: times,
				date: {},
				start: {},
				end: {}
			};
		},
		watch: {
			modelValue: {
				handler(newVal) {
					if (newVal) {
						this.$nextTick(() => this.$refs['calendar'].open());
					}
				},
				immediate: true
			}
		},
		methods: {
			close() {
				// this.$refs['calendar'].close();
				this.$emit("close")
			},
			ok() {
				/* if (this.start.index <= this.end.index) {
					this.$emit('change', {
						date: this.date,
						start: this.start,
						end: this.end,
						dateTime: `${this.date.dateMD} ${this.start.time}-${this.end.time}`
					});
				} else {
					uni.showToast({
						title: '开始时间不能小于结束时间',
						icon: 'none'
					});
				} */
				this.$emit('change', {
					date: this.date,
					start: this.start,
					end: this.end || '',
					dateTime: `${this.date.dayjsObject.$y}/${(this.date.dayjsObject.$M +1) < 10 ? '0' + (this.date.dayjsObject.$M +1) : this.date.dayjsObject.$M +1}/${this.date.dayjsObject.$D}${this.start.time}:00`,
				});
				
			},
			uppopChange(e) {
				const {
					show
				} = e;
				this.$emit('update:modelValue', show);
			},
			bindChange(e) {
				const [dateIndex, startTimeIndex, endTimeIndex] = e.detail.value;
				this.date = this.ranges.find((_, index) => dateIndex === index);
				this.start = this.rangesTime.find((_, index) => startTimeIndex === index);
				// this.end = this.rangesTime.find((_, index) => endTimeIndex === index);
			},
			isNotEmpty(val) {
				const types = typeof val;
				if (types === 'string' && val !== '') return true;
				if (
					types === 'object' &&
					val !== null &&
					JSON.stringify(val) !== '{}' &&
					JSON.stringify(val) !== '[]'
				)
					return true;
				if (types === 'number') {
					switch (val.toString()) {
						case 'NaN':
							return false;
						default:
							return true;
					}
				}
				if (types === 'undefined') return false;
				if (types === 'boolean') return true;
				if (types === 'function') return true;
				return false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.calendar-wrapper {
		height: 54vh;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		overflow: hidden;

		.title {
			height: 6vh;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;

			text {
				font-size: 32rpx;

				&:first-child {
					font-size: 32rpx;
					color: #666;
				}

				&:last-child {
					font-size: 32rpx;
					color: #09f;
				}
			}
		}

		.picker-view {
			width: 100vw;
			height: 48vh;
			background-color: #fff;
			border-radius: 32rpx 32rpx 0 0;
		}

		.md-item {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>